<template>
  <div class="customerOverview-container">
    <div class="customerOverview-page">
      <el-card>
        <el-table :data="list" v-loading="listLoading" border style="width: 100%; margin: 0px 0 20px 0">
          <el-table-column
            label="订单日期"
            align="center"
            min-width="100">
            <template slot-scope="scope">
                {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="订单号"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.orderSn}}
              <img src="../../../assets/images/dui.png" v-if="scope.row.isZ == 1"  style="vertical-align: middle;"/>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="客户名称"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.customerName}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="合同商品"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.orderGoodsNames}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="合同数量"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.orderGoodsNum}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="收货信息"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.receiveAddress}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="合同金额"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.orderAmount}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="合同状态"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.orderState}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="业务员"
            min-width="150">
            <template slot-scope="scope">
              {{scope.row.userName}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            min-width="150">
            <template slot-scope="scope">
               <el-button type="text" @click="toOrderDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.pageSize"
            :page-sizes="[10,15,20]"
            :current-page.sync="listQuery.pageNum"
            :total="count">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {formatDate} from '@/utils/date';
import store from '@/store'
import {getCustomerOption, addRelatio, delRelation,} from '@/api/partner'
import {developOrderList} from '@/api/company'

const defaultListQuery={
  customerId:'',
  isMy:1,
  "pageNum" : 1,
  "pageSize" : 10
};
export default {
  name: "customerSycl",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      list:[],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count: 0,
      listLoading: false,
    }
  },
  components : {

  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),

  },
  created() {

  },
  filters: {

  },
  methods:{
    init(customerId){
      this.listQuery.customerId = customerId;
      this.getList();
    },
    //去合同详情页
    toOrderDetail(item){
      let routeData = this.$router.resolve({name:'saleDetail',query:{id:item.orderId,type:'see'}});
      window.open(routeData.href);
    },
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },
    //获取列表
    getList() {
      this.listLoading = true;
      developOrderList(this.listQuery).then(response => {
        this.list = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
  }
}
</script>

<style lang="scss">


</style>
